<template>
    <div  class="main-page"  >
        <div class="news-box">
            <i class="toutiao iconfont icontoutiao"></i>
            <div class="news">
                <div class="item" v-for="item in educationIndexNewsList" >
                    <span class="title" @click="goNews(item,'1')">{{item.title}}</span>
                    <span class="time">{{item.createDate}}</span>
                </div>
            </div>
            <div class="search-box">
                <el-input v-model="input" placeholder="请输入搜索内容" class="input"></el-input>
                <div class="search-text iconfont iconsousuo1" @click="goSerach('searchList',input)">搜索</div>
            </div>
        </div>
        <div class="banner-box">
            <!-- <div class="swiper swiperBox banner-img" v-swiper:swiper="swiperOption" ref="swiperBox" >
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item,i) in 9" :key="i" >
                            <img src="http://www.ccopyright.com.cn/file/upload/2020/08/30/1599224048.png" alt="" class="img">

                        </div>
                    </div>
                </div>  -->
            <el-carousel height="350px" class="banner-img">
              <el-carousel-item v-for="(item,index) in indexData.bannerList" :key="index">
                <img :src="$axios.defaults.baseURL+item.pictureUrl" alt="" class="img" @click="goOut(item.locationUrl)">
              </el-carousel-item>
            </el-carousel>

            <div class="banner-right">
                <div class="ban-main">
                  <div class="item1">
                      <div class="title " ><i class="iconfont "></i>   </div>
                      <div class="item-main">
                          <div class="item-i"  @click="goPage('/home')">
                              <span class="iconfont">进入学习中心</span>
                              <!-- <span class="text"></span> -->
                          </div>
                          <div style="clear:both"></div>
                      </div>
                  </div>
                    <div class="item" v-for="(item,index) in dataArr">
                        <div class="title " ><i class="iconfont " :class="item.icon"></i>{{item.title}}</div>
                        <div class="item-main">
                            <div class="item-i" v-for="(item1,index1) in item.list" @click="goPage(item1.path)">
                                <span class="iconfont" :class="item1.icon"></span>
                                <span class="text">{{item1.title}}</span>
                            </div>
                            <div style="clear:both"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>
        <div class="course-all">
            <div class="course-left">
<!--                <div class="main-course" style="margin-bottom:20px">
                    <h3 class="title iconfont iconhongqi-copy">必修课程 <i class="more iconfont icongengduo1"><span class="chakangengduo" @click="goMore('0')">查看更多>></span></i></h3>
                    <div class="t-course">
                        <div class="course-item" v-for="(item,index) in courseRecList" @click="goPage('dbcourse_content/'+item.courseId)">
                            <img :src="$axios.defaults.baseURL+item.photo" alt="">
                            <span class="status">{{item.courseTypeLabel}}</span>
                            <span class="name">{{item.courseName}}</span>
                            <div class="num-box">
                                <span class="num-c">{{item.courseSize}}节课</span>
                                <span v-if="item.courseType=='1'" class="num-l">{{item.courseSize}}个练习</span>
                                <span class="price" v-if="item.presentPrice!=0">{{item.presentPrice}}元</span>
                                <span class="price" v-if="item.presentPrice==0">免费</span>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div> -->
                <div class="main-course" v-for="(item,index) in hotCourse">
                    <div v-if="item.educationIndexEcommendDetailsList.length>0">
                      <h3 class="title iconfont iconremen2">{{item.title}} <span class="chakangengduo" @click="goMore('0')">查看更多>></span></h3>
                      <div class="t-course">
                          <div class="course-item" v-for="(item1,index1) in item.educationIndexEcommendDetailsList" @click="goPage('dbcourse_content/'+item1.educationCourse.courseId)">
                              <img :src="$axios.defaults.baseURL+item1.educationCourse.photo" alt="">
                              <span class="status">{{item1.educationCourse.courseTypeLabel}}</span>
                              <span class="name">{{item1.educationCourse.courseName}}</span>
                              <div class="num-box">
                                  <!-- <span class="num-c">{{item1.educationCourse.courseSize}}节课</span> -->
                                   <span  v-if="item1.courseType=='1' ||item1.courseType=='5'" class="num-c">{{item1.educationCourse.courseSize}}节课</span>
                                  <span v-if="item1.courseType=='3'" class="num-l">开始时间：{{item1.educationCourse.courseInfo.startTime}}</span>
                                  <span v-if="item1.courseType=='4'" class="num-l">开课时间：{{item1.educationCourse.courseInfo.courseStartDate}}</span>
                                  <span v-if="item1.courseType=='1' || item1.courseType=='5'" class="num-l">{{item1.educationCourse.paperSize}}个测试</span>
                                  <!-- <span class="price">{{item1.educationCourse.presentPrice}}元</span> -->
                                  <span class="price" v-if="item1.educationCourse.presentPrice!=0">{{item1.educationCourse.presentPrice}}元</span>
                                  <span class="price" v-if="item1.educationCourse.presentPrice==0">免费</span>
                              </div>
                          </div>
                      </div>
                      <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="course-news">
                <div class="news-all">
                    <h3 class="title iconfont iconxinwen1">新闻资讯<span class="chakangengduo" @click="goMore('1')">查看更多>></span></h3>
                    <div class="box">
                        <p class="news-item" v-for="(item,index) in newsrecList" @click="goNews(item,'2')"> <span class="text" >{{item.title}}</span><div class="clear"></div></p>
                    </div>
                </div>
                <div class="news-all">
                    <h3 class="title iconfont iconlianxi1">公告栏<span class="chakangengduo"@click="goMore('2')">查看更多>></span></h3>
                    <div class="box">
                        <p class="news-item" v-for="(item,index) in recList" @click="goNews(item,'3')"> <span class="text">{{item.title}}</span><div class="clear"></div></p>
                    </div>
                </div>
                <div class="news-all">
                    <h3 class="title iconfont iconbangzhuzhongxin">帮助中心<span class="chakangengduo" @click="goMore('3')">查看更多>></span></h3>
                    <div class="box">
                        <p class="news-item" v-for="(item,index) in educationHelperList" @click="goNews(item,'4')"> <span class="text">{{item.title}}</span><div class="clear"></div></p>
                    </div>
                </div>
            </div>
            <div class="clear"></div>
        </div>

        <div class="content-box">
            <div class="top-title">
                <h3 class="title iconfont iconremen1">相关链接</h3>
                <div class="line-box">
                    <div class="line-center"></div>
                </div>
                <!-- <span class="text" >更多</span> -->
            </div>
            <div class="content-data content-out">
                <div class="out-item" v-for="(item,index) in indexData.friendshipList" @click="goOut(item.link)"
                :style="{backgroundImage: 'url(' + $axios.defaults.baseURL + item.photo + ')'}"
                >{{item.title}}</div>
                <div style="clear:both"></div>
            </div>
        </div>
    </div>
</template>

<script>
import'../../assets/css/style.less'
import'../../assets/css/fonts/iconfont.css'

import Cookies from 'js-cookie'
import { Notification } from 'element-ui';
export default {
    props:{
        indexData:{
            type:Object
        }
    },
    components: {
    },
    data(){
        return{
            input:'',
            swiperOption:{
                    //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
                    notNextTick: true,
                    //循环
                    loop: true,
                    //设定初始化时slide的索引
                    initialSlide: 0,
                    //自动播放
                    autoplay: {
                      delay: 1500,
                      stopOnLastSlide: true,
                      /* 触摸滑动后是否继续轮播 */
                      disableOnInteraction: false
                    },
                    //滑动速度
                    speed: 800,
                    //滑动方向
                    direction: "horizontal",
                    //小手掌抓取滑动
                    grabCursor: false,
                    on: {
                      //滑动之后回调函数
                      slideChangeTransitionStart: function() {
                        /* realIndex为滚动到当前的slide索引值 */
                        //that.imgIndex= this.realIndex - 1;
                      },
                    },
                    slidesPerView: 1,
                    spaceBetween: 0,
                    //分页器设置
                    // pagination: {
                    //   el: ".swiper-pagination",
                    //   clickable: true,
                    //   type: "bullets"
                    // }
                },
            dataArr:[
              // {
              //     title:'      ',
              //     icon:'',
              //     list:[
              //         {title:'学习中心',icon:'iconlianxi',path:'/home'},
              //     //     {title:'模拟考试',icon:'iconcaiji',path:'/home'},
              //     //     {title:'正式考试',icon:'iconkaoshi',path:'/home'},
              //     ]
              // },
                {
                    title:'我要学习',
                    icon:'iconxuexi',
                    list:[
                        {title:'课程中心',icon:'iconxuexi',path:'/course_center'},
                        {title:'我的课程',icon:'iconzhibobofangshexiangjiguankanmianxing',path:'/mycourse'},
                        {title:'我的证书',icon:'iconfeiji',path:'/certificate'},
                    ]
                },

                {
                    title:'我要考试',
                    icon:'iconceshi',
                    list:[
                        {title:'考试报名',icon:'iconlianxi',path:'/signUp'},
                        // {title:'模拟考试',icon:'iconcaiji',path:'/home'},
                        {title:'正式考试',icon:'iconkaoshi',path:'/exams'},
                    ]
                },
                // {
                //     title:'学习档案',
                //     icon:'iconhistory',
                //     list:[
                //         {title:'我的证书',icon:'iconzhengshu',path:'/home'},
                //         {title:'学习记录',icon:'iconjilu',path:'/home'},
                //         {title:'我的订单',icon:'iconorder',path:'/home'},
                //     ]
                // },
            ],
            recList:[],
            newsrecList:[],
            courseRecList:[],
            hotCourse:[],
            educationIndexNewsList:[],
            educationHelperList:[]
        }
    },
    created(){

        if(this.indexData.educationNewsList){
            let list = this.indexData.educationNewsList.data.dtoRecPage.list;
            let arr = [];
            list.forEach((item,i)=>{
                if(i<8){
                    arr.push(item)
                }
            })

            this.recList = arr;

            let list1 = this.indexData.educationNoticeList.data;
            let arr1 = [];
            list1.forEach((item,i)=>{
                if(i<8){
                    arr1.push(item)
                }
            })

            this.newsrecList = arr1;


            let list2 = this.indexData.courseRecList.list;
            let arr2 = [];
            list2.forEach((item,i)=>{
                item.ke = 0;
                item.xi = 0;
                let arr3 = [];
                let arr4 = [];
                if(item.educationCourseDbDetailsList){
                    item.educationCourseDbDetailsList.forEach((item1,i1)=>{
                        if(item1.detailType=='1'){
                            arr3.push(item1)
                        }
                        else{
                            arr4.push(item1)
                        }
                    })

                    item.ke = arr3.length;
                    item.xi = arr4.length;
                }
                if(i<6){
                    arr2.push(item)
                }
            })

            this.courseRecList = arr2;

            this.hotCourse = this.indexData.educationIndexEcommendList;


            console.log(this.hotCourse,7777777777)


            let list6 = this.indexData.educationIndexNewsList.data;
            let arr6 = [];
            list6.forEach((item,i)=>{
                if(i<3){
                    arr6.push(item)
                }
            })

            this.educationIndexNewsList = arr6;


            let list7 = this.indexData.educationHelperList.data;
            let arr7 = [];
            list7.forEach((item,i)=>{
                if(i<8){
                    arr7.push(item)
                }
            })

            this.educationHelperList = arr7;

        }

    },
    watch:{
        indexData(val,old){
            console.log(val)
            if(val.educationNewsList){
                let list = val.educationNewsList.data.dtoRecPage.list;
                let arr = [];
                list.forEach((item,i)=>{
                    if(i<8){
                        arr.push(item)
                    }
                })

                this.recList = arr;

                let list1 = val.educationNoticeList.data;
                let arr1 = [];
                list1.forEach((item,i)=>{
                    if(i<8){
                        arr1.push(item)
                    }
                })

                this.newsrecList = arr1;


                let list2 = val.courseRecList.list;
                let arr2 = [];
                list2.forEach((item,i)=>{
                    if(i<6){
                        arr2.push(item)
                    }
                })

                this.courseRecList = arr2;

                this.hotCourse = val.educationIndexEcommendList;

                console.log(this.hotCourse,7777777777)
                let list6 = val.educationIndexNewsList.data;
                let arr6 = [];
                list6.forEach((item,i)=>{
                    if(i<3){
                        arr6.push(item)
                    }
                })

                this.educationIndexNewsList = arr6;


                let list7 = val.educationHelperList.data;
                let arr7 = [];
                list7.forEach((item,i)=>{
                    if(i<8){
                        arr7.push(item)
                    }
                })

                this.educationHelperList = arr7;

            }
        }
    },
    computed:{
    },
    mounted(){
    },
    head() {
        return {
          title: '首页',
          meta: [
            {
              hid: 'description',
              name: 'description',
              content: this.description
            },
            {
              hid: 'keywords',
              name: 'keywords',
              content: this.keywords
            },
          ],
          link: [
              {rel: 'icon', type: 'image/x-icon', href: this.favicon}
          ]
        }
    },
    methods:{
      goMore(type){
            if(type=='0'){
              this.$router.push('/allCourse')
            }
            if(type=='1'){
              this.$router.push('/news')
            }
            if(type=='2'){
              this.$router.push('/gonggao')
            }
            if(type=='3'){
              this.$router.push('/help')
            }
          },
        goNews(item,type){
            if(type=='1'){
              this.$router.push('/indexNewsContent/'+item.id)
            }else if(type=='2'){
              this.$router.push('/noticeContent/'+item.id)
            }else if(type=='3'){
              this.$router.push('/newsContent/'+item.id)
            }else if(type=='4'){
              this.$router.push('/helpContent/'+item.id)
            }
        },
        goPage(url){
            this.$router.push(url);
        },
        goSerach(url,title){
            console.log(title,66666666)
            this.$router.push({
              name:url,
              query:{title:title},
            });
        },
        goOut(url){
            window.open(url)
        }
    }
}
</script>

<style lang="less">
    .main-page{
        width:100%;
        .content-box{
            width:1220px;
            margin:0 auto;
            padding-top:30px;
            margin-bottom:20px;
            .content-data{
                width:100%;
                .out-item{
                    width: 260px;
                    height: 70px;
                    background-size: 275px 70px;
                    line-height: 70px;
                    text-align: center;
                    font-size: 16px;
                    box-sizing:border-box;
                    color: #2478d2;
                    margin-top: 20px;
                    cursor: pointer;
                    border:1px solid #dadada;
                    float: left;
                    margin-right: 50px;
                }
                .out-item:nth-child(4n){
                    margin-right:0;
                }
            }
            .top-title{
                width:100%;
                position:relative;
                .line-box{
                    width:100%;
                    height:5px;
                    background:#e2e2e2;
                    margin-top:5px;
                    .line-center{
                        width:140px;
                        margin:0 auto;
                        height:100%;
                        background:#2478d2;
                    }
                }
                img{
                    margin-right:8px;
                }
                .text{
                    line-height:30px;
                    position:absolute;
                    right:0;
                    top:10px;
                    font-size:16px;
                    color:#444444;
                    cursor:pointer;
                }
                .title{
                    width:100%;
                    height:50px;
                    line-height:50px;
                    text-align:center;
                    font-size:22px;
                    font-weight:500;
                    color:#333333;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                .title:before{
                    font-size:32px;
                    margin-right:5px;
                    color:#2478d2;
                }
            }
        }
        .course-all{
            width:1220px;
            margin:0 auto;
            .course-left{
                width:830px;
                float:left;
                .main-course{
                    width:100%;
                    .title{
                        width:100%;
                        line-height:30px;
                        font-size:22px;
                        color:#333333;
                        margin:15px 0;
                        position:relative;
                        font-weight:500;
                        .chakangengduo{
                              text-decoration: underline;
                              height: 30px;
                              // line-height:30px;
                              vertical-align: bottom;
                              float: right;
                              font-size:18px ;
                              font-weight: bold;
                              // background-color:#000000 ;
                              color: #0076ca;
                              cursor: pointer;
                            }
                        .more{
                            position:absolute;
                            line-height:30px;
                            right:10px;
                            top:0;
                            font-size:24px;
                            color:#0076ca;

                        }

                    }
                    .title:before{
                        margin-right:5px;
                        color:#ffa724;
                        font-size:26px;
                    }
                    .t-course{
                        width:100%;
                        .course-item{
                            cursor:pointer;
                            width:270px;
                            float:left;
                            margin-right:10px;
                            box-sizing:border-box;
                            border:1px solid #dadada;
                            margin-bottom:15px;
                            position: relative;

                                background: #fff;
                                margin-top: 20px;
                                padding-bottom: 10px;
                                min-height: 240px;
                                box-shadow: 0 2px 10px #d8d8d8;

                            .status{
                                position:absolute;
                                right:0;
                                padding:6px 10px;
                                background:#3a7bf3;
                                top:15px;
                                font-size:14px;
                                color:#ffffff;
                            }
                            img{
                                width:100%;
                                height:180px;
                                display:block;

                            }
                            .name{
                                display:block;
                                width:100%;
                                line-height:20px;
                                margin-top:5px;
                                height:40px;
                                line-height: 40px;
                                font-size:15px;
                                color:#444444;
                                box-sizing:border-box;
                                padding:0 10px;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                                -webkit-line-clamp: 2;
                                overflow: hidden;
                                margin-bottom:5px;
                            }
                            .num-box{
                                box-sizing:border-box;
                                width:100%;
                                padding:0 10px;
                                height:15px;
                                margin-bottom:15px;
                                .num-c{
                                    float:left;
                                    line-height:15px;
                                    float:left;
                                    font-size:12px;
                                    color:#666666;
                                    border-right:1px solid #b7b0b0;
                                    padding-right:5px;
                                    margin-right:5px;
                                }
                                .num-l{
                                    float:left;
                                    line-height:15px;
                                    float:left;
                                    font-size:12px;
                                    color:#666666;

                                }
                                .price{
                                    font-size:24px;
                                    color:#f22d2d;
                                    line-height:15px;
                                    float:right;
                                }

                            }
                        }
                        .course-item:nth-child(3n){
                            margin-right:0;
                        }
                    }
                }
            }
            .course-news{
                width:370px;
                float:right;
                .news-all{
                    width:100%;
                    float:left;
                    margin-bottom:8px;
                    .title{
                        width:100%;
                        line-height:30px;
                        font-size:22px;
                        color:#333333;
                        margin:15px 0;
                        font-weight:500;
                        .chakangengduo{
                          float: right;
                          font-size:16px ;
                          background-color:#0076ca ;
                          color: white;
                          cursor: pointer;
                        }
                    }
                    .title:before{
                        margin-right: 5px;
                        color: #0076ca;
                        font-size: 26px;
                    }
                    .box{
                        width:100%;
                        background:#effaff;
                        box-sizing:border-box;
                        padding:20px 10px 0px 7px;
                    }
                    .news-item{
                        width:100%;
                        margin-bottom:20px;
                        cursor:pointer;
                        float: left;
                        .dian{
                            width:5px;
                            height:5px;
                            border-radius:50%;
                            background:#444444;
                            margin-top:7px;
                            float:left;
                            display:block;
                        }
                        .text{
                            line-height:20px;
                            font-size:14px;
                            color:#666666;
                            height:20px;
                            overflow: hidden;
                            text-overflow:ellipsis;
                            white-space: nowrap;
                            float:left;
                            display:block;
                            margin-left:10px;
                            position:relative;
                            box-sizing:border-box;
                            width:100%;
                            padding-left:10px;
                        }
                        .text:before{
                            position:absolute;
                            top:7px;
                            width:5px;
                            content:'';
                            left:0;
                            height:5px;
                            border-radius:50%;
                            top:50%;
                            transform:translateY(-50%);
                            background:#444444;
                        }
                    }

                }
                .news-all:last-child{
                    margin-bottom:0;
                }
            }
        }
        .banner-box{
            width:1220px;
            margin:0 auto;
            .swiperBox{
                width:100%;
                height:280px;
                .swiper-slide{
                  height:100%;
                  background:#ffffff;
                  border-radius:15px;
                  padding:10px;
                  position:relative;
                  cursor:pointer;
                  .progress-main{
                    width:calc(100% - 20px);
                    position:absolute;
                    left:10px;
                    bottom:30px;
                    .el-progress-bar__outer{
                      border-radius:0;
                      height:15px !important;
                      background-color:#ffffff;
                      .el-progress-bar__inner{
                        border-radius:0;
                        background-color:#f29b44;
                      }
                    }
                  }
                  .tu{
                    width:100%;
                    height:100%;
                    display:block;
                    border-radius:10px;
                  }
                  .bofang{
                    width:80px;
                    display:block;
                    position:absolute;
                    top:50%;
                    left:50%;
                    transform:translate(-50%,-50%);
                  }
                }
              }
            .banner-img{
                width:830px;
                float:left;
                .img{
                    width:100%;
                    height:350px;
                    display:block;
                    cursor: pointer;
                }
            }
            .banner-right{
                width:370px;
                height:350px;
                background:#0076ca;
                float:right;
                box-sizing:border-box;
                padding:10px;
                .ban-main{
                    width:100%;
                    height:100%;
                    display:block;
                    background:#ffffff;
                    box-sizing:border-box;
                    padding-left: 25px;
                    float:left;
                    .item{
                        width:100%;
                        margin-top:7px;
                        .title{
                            font-size:18px;
                            color:#0076ca;
                            line-height:30px;
                            i{
                                display:block;
                                width:30px;
                                height:30px;
                                line-height:30px;
                                text-align:center;
                                font-size:24px;
                                color:#0076ca;
                                margin-right:5px;
                                float:left;
                            }
                            .iconceshi:before{
                                font-size:32px;
                            }
                        }
                        .item-main{
                            width:100%;
                            margin-top:5px;
                            box-sizing:border-box;
                            padding:0 5px;

                            .item-i{
                                width:100px;
                                float:left;
                                cursor:pointer;
                                .iconfont{
                                    width:40px;
                                    height:40px;
                                    margin:0 auto;
                                    display:block;
                                    border-radius:5px;
                                    background:#0076ca;
                                    color:#ffffff;
                                    line-height:40px;
                                    text-align:center;
                                    font-size:22px;

                                }
                                .iconfont1{
                                    margin-top:30px;
                                    width:240px;
                                    height:40px;
                                    margin:0 auto;
                                    display:block;
                                    border-radius:5px;
                                    background:#0076ca;
                                    color:#ffffff;
                                    line-height:40px;
                                    text-align:center;
                                    font-size:22px;

                                }
                                .text{
                                    display:block;
                                    width:100%;
                                    text-align:center;
                                    font-size:14px;
                                    color:#0076ca;
                                    line-height:25px;
                                }
                            }
                        }

                    }
                    .item1{
                        width:100%;
                        margin-top:7px;
                        .title{
                            font-size:18px;
                            color:#0076ca;
                            line-height:30px;
                            i{
                                display:block;
                                width:30px;
                                height:30px;
                                line-height:30px;
                                text-align:center;
                                font-size:24px;
                                color:#0076ca;
                                margin-right:5px;
                                float:left;
                            }
                            .iconceshi:before{
                                font-size:32px;
                            }
                        }
                        .item-main{
                            width:100%;
                            margin-top:5px;
                            box-sizing:border-box;
                            padding:0 5px;

                            .item-i{
                                width:240px;
                                display: flex;
                                justify-content: space-between;
                                margin: 30px 0;
                                cursor:pointer;
                                .iconfont{
                                    width:100%;
                                    height:40px;
                                    margin:0 auto;
                                    display:block;
                                    border-radius:5px;
                                    background:#0076ca;
                                    color:#ffffff;
                                    line-height:40px;
                                    text-align:center;
                                    font-size:22px;

                                }
                                .iconfont1{
                                    margin-top:30px;
                                    width:240px;
                                    height:40px;
                                    margin:0 auto;
                                    display:block;
                                    border-radius:5px;
                                    background:#0076ca;
                                    color:#ffffff;
                                    line-height:40px;
                                    text-align:center;
                                    font-size:22px;

                                }
                                .text{
                                    display:block;
                                    width:100%;
                                    text-align:center;
                                    font-size:14px;
                                    color:#0076ca;
                                    line-height:25px;
                                }
                            }
                        }

                    }
                }
            }
        }
        .news-box{
            width:1220px;
            margin:0 auto;
            height:100px;
            position:relative;
            .search-box{
                position:absolute;
                top:50%;
                right:0;
                transform:translateY(-50%);
                height:40px;
                .input{
                    height:40px;
                    line-height:40px;
                    float:left;
                    width:250px;
                    .el-input__inner{
                        border:#0076ca 1px solid;
                        border-radius:8px 0 0 8px;
                    }

                }
                .search-text{
                    line-height:40px;
                    padding:0 20px;
                    background:#0076ca;
                    color:#ffffff;
                    font-size:18px;
                    float:left;
                    border-radius:0 8px 8px 0;
                    cursor: pointer;
                }
                .iconsousuo1:before{
                    margin-right:5px;
                }
            }
            .icontoutiao{
                line-height:100px;
                font-size:60px;
                color:#0053a0;
                float:left;
                display:block;
            }
            .news{
                width:740px;
                margin-left:25px;
                height:100%;
                box-sizing:border-box;
                padding:12px 0;
                float:left;
                .item{
                    width:100%;
                    height:25px;
                    // cursor:pointer;
                    .title{
                        cursor:pointer;
                        float:left;
                        line-height:25px;
                        max-wdith:560px;
                        font-size:14px;
                        color:#555555;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        white-space: nowrap;
                    }
                    .time{
                        float:right;
                        line-height:25px;
                        max-wdith:700px;
                        font-size:14px;
                        color:#555555;
                    }
                }
            }

        }
    }
</style>
